<template>
  <div class="audit-node-edit">
    <el-drawer
        title="节点编辑"
        v-model="openFlag"
        direction="rtl">
      <div class="list" v-if="currentNode">
        <div class="item">
            <div class="header">
              <span class="title">
                节点名称
              </span>
            </div>
            <div class="content">
              <el-input v-model="currentNode.name" />
            </div>
        </div>

        <div class="item">
          <div class="header">
            <span class="title">审批类型</span>
          </div>
          <div class="content">
            <el-select v-model="currentNode.taskType">
              <el-option :value="1" label="单人审批"></el-option>
              <el-option :value="2" label="多人审批"></el-option>
<!--              <el-option :value="3" label="部门审批"></el-option>-->
            </el-select>
          </div>
        </div>

        <div class="item" v-if="currentNode.taskType === 2">
          <div class="header">
            <span class="title">审批规则</span>
          </div>
          <div class="content">
            
            <el-radio-group v-model="currentNode.auditRule">
              <el-radio :value="1">或签（一名审批人同意即可）</el-radio>
              <el-radio :value="2">会签（所有审批人均同意）</el-radio>
            </el-radio-group>
          </div>
        </div>

        <div class="item">
          <div class="header">
            <span class="title">审批人</span>
            <el-button type="primary" link @click="choose">选择</el-button>
          </div>
          <div class="content">
            <template v-if="currentNode.auditUser">
              <el-tag v-for="u in currentNode.auditUser">{{u.nickName}}</el-tag>
            </template>
          </div>
        </div>

      </div>
    </el-drawer>
    <user-choose ref="userChoose" @sub="onChooseSub"></user-choose>
  </div>
</template>

<script setup>
import { listAssetAuditUser } from "@/api/asset/assetAuditConfigNode.js";
import UserChoose from "@/components/User/UserChoose.vue";

const props = defineProps({
  currentNode: {
    type: Object,
  }
})

const emit = defineEmits(['sub']);

const userChoose = ref();

const openFlag = ref(false);

const formData = reactive({});

const userList = ref([]);
let nodeIndex = 0;

/** 查询资产审批配置列表 */
function getUserList() {
  listAssetAuditUser().then(response => {
    userList.value = response;
  });
}

/**
 * 显示编辑的侧边栏
 */
function open() {
  openFlag.value = true;
}

/**
 * 当选择审批人员后的操作
 */
function onChooseSub(users) {
  props.currentNode.auditUser = users;
}

function choose() {
  const isSingle = props.currentNode.taskType===1;
  userChoose.value.open(isSingle)
}

function close() {
  openFlag.value = false;
}

function sub() {
  emit('sub', {
    index: nodeIndex,
    form: formData
  })
  close();
}

onMounted(()=> {
  getUserList();
})

defineExpose({
  open
})



</script>

<style scoped lang="scss">

.list {
  padding: 0 10px;
  .item {
    margin-top: 16px;
    .header {
      display: flex;
      align-items: center;
      .title {
        line-height: 26px;
        font-size: 13px;
      }
    }
  }
}

.el-radio-group {
  align-items: start;
  display: flex;
  flex-wrap: wrap;
  font-size: 0;
  flex-direction: column;
}

</style>